<template>
  <div class="pie" id="bar3d1"></div>
</template>

<script>
import * as echarts from 'echarts';
import json from './theme';
export default {
  name: 'Bar3d1',
  props: {
    data: {
      type: Array,
      default: () => {
        return [

        ];
      }
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val.length) {
          this.$nextTick(() => {
            this.drawShape();
          });
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      xAxisText: [],
      yAxisData: []
    };
  },
  mounted() {

  },
  methods: {
    drawShape() {
      this.xAxisText = this.data.filter(e => e.type).map(e => e.type);
      console.log(this.xAxisText);
      this.yAxisData = this.data.filter(e => e.type).map(e => Number(e.sum));
      // 创建立方体正面图形
      const cubeShape1 = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
          width: 80, // 长方体宽度
          zWidth: 2, // 阴影折角高
          zHeight: 0 // 阴影折角宽
        },
        buildPath: (ctx, shape) => {
          const api = shape.api;
          const xAxisPoint = api.coord([shape.xValue, 0]);
          const p0 = [shape.x, shape.y];
          const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y];
          const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y];
          const p2 = [xAxisPoint[0] - shape.width / this.xAxisText.length, xAxisPoint[1]];
          const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]];

          // 绘制正面
          ctx.moveTo(p0[0], p0[1]); // 0
          ctx.lineTo(p1[0], p1[1]); // 1
          ctx.lineTo(p2[0], p2[1]); // 2
          ctx.lineTo(p3[0], p3[1]); // 3
          ctx.lineTo(p4[0], p4[1]); // 4
          ctx.lineTo(p0[0], p0[1]); // 0
          ctx.closePath();
        }
      });

      // 创建立方体的顶和侧面
      const cubeShape2 = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
          width: 80,
          zWidth: 2,
          zHeight: 0
        },
        buildPath: (ctx, shape) => {
          const api = shape.api;
          const xAxisPoint = api.coord([shape.xValue, 0]);
          const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y];
          const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y];
          const p6 = [shape.x + shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
          const p7 = [shape.x - shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
          const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]];
          const p5 = [xAxisPoint[0] + shape.width / this.xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];

          // 绘制侧面
          ctx.moveTo(p4[0] - 1, p4[1] - 1); // 4
          ctx.lineTo(p3[0] - 1, p3[1] + 1); // 3
          ctx.lineTo(p5[0] + 6, p5[1] - 6); // 5
          ctx.lineTo(p6[0] + 7, p6[1] - 8); // 6
          ctx.lineTo(p4[0], p4[1]); // 4

          // 绘制顶部
          ctx.moveTo(p4[0], p4[1]); // 4
          ctx.lineTo(p6[0] + 7, p6[1] - 8); // 6
          ctx.lineTo(p7[0] + 7, p7[1] - 8); // 7
          ctx.lineTo(p1[0] + 0.5, p1[1]); // 1
          ctx.lineTo(p4[0], p4[1] + 1); // 4
          ctx.closePath();
        }
      });

      echarts.graphic.registerShape('cubeShape1', cubeShape1);
      echarts.graphic.registerShape('cubeShape2', cubeShape2);
      this.init();
    },
    init() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('bar3d1');
        echarts.registerTheme('dark', json);
        const myChart = echarts.init(chartDom, 'dark');

        const option = {
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'category',
            splitNumber: 6,
            // boundaryGap: false,
            data: this.xAxisText,
            axisLabel: {
              textStyle: {
                fontSize: 11
              },

              // rotate: 45,
              interval: 0, // 标签设置为全部显示
              formatter: function(value) { // 这是回调函数，参数是label中的文字
                // eslint-disable-next-line no-control-regex
                return value.replace(/[^\x00-\xff]/g, '$&\x01').replace(/.{8}\x01?/g, '$&\n').replace(/\x01/g, '');
              }
            }
            // boundaryGap: ['20%', '20%']
          },
          yAxis: {
            type: 'value',
            minInterval: 1
          },
          grid: {
            top: '5%',
            bottom: '32%',
            right: '2%'
          },
          // itemStyle: {
          //   color: 'transparent'
          // },
          series: [
            {
              barGap: '10%',
              data: this.yAxisData,
              type: 'custom',
              renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)]);
                return {
                  type: 'group',
                  children: [{
                      type: 'cubeShape1', // 正方体正面
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1]
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0.1,
                          color: '#01F0FF'
                        }, {
                          offset: 1,
                          color: '#005559'
                        }])
                      }
                    }, {
                      type: 'cubeShape2', // 正方体侧面和顶
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1]
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 1,
                          color: '#005559'
                        }, {
                          offset: 0,
                          color: '#00a2aa'
                        }])
                      }
                    }]
                };
              }
            }
          ]
        };

        option && myChart.setOption(option);
      });
    }
  }
};
</script>

<style scoped>
  .pie {
    height: inherit;
  }
</style>
